<template>
  <div class="custom-form">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" :key="showFormKey">
       <!-- 出差申请——————标题 -->
        <el-col :span="24">
          <el-form-item label-width="0" prop="field1002d94">
            <h2 align='center' style="color:undefined;font-size: nullpx;text-align: center">出差申请</h2>
          </el-form-item>
        </el-col>
         <!-- 部门名称 -->
        <el-col :span="24" v-show="showFalg">
          <el-form-item :label="$t('部门名称')">
            <el-input v-model="formData['F_DepartmentName']" placeholder="请输入部门名称"
              :readonly="true" :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
         <!-- 申请人id -->
         <el-col :span="24" v-show="showFalg">
          <el-form-item :label="$t('申请人')">
            <el-input v-model="formData['F_UserId']" placeholder="请输入申请人id"
              :readonly="true" :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 角色id -->
        <el-col :span="24" v-show="showFalg">
          <el-form-item :label="$t('角色id')">
            <el-input v-model="formData['F_RoleId']" placeholder="请输入角色id"
              :readonly="true" :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 角色名称 -->
        <el-col :span="24" v-show="showFalg">
          <el-form-item :label="$t('角色名称')">
            <el-input v-model="formData['F_RoleName']" placeholder="请输入角色名称"
              :readonly="true" :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
         <!-- 职级 -->
        <el-col :span="24" v-show="showFalg">
          <el-form-item :label="$t('职级')">
            <el-input v-model="formData['F_Job']" placeholder="请输入职级名称"
              :readonly="true" :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 地区 -->
        <el-col :span="24" v-show="showFalg">
          <el-form-item :label="$t('地区')">
            <el-input v-model="formData['F_Area']" placeholder="请输入地区"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
         <!-- 申请时间 -->
        <el-col :span="24" v-show="showFalg">
          <el-form-item :label="$t('申请时间')">
            <el-input v-model="formData['F_Create_Time']" placeholder="申请时间">
            </el-input>
          </el-form-item>
        </el-col>
         <!-- 是否生效 -->
        <el-col :span="24" v-show="showFalg">
          <el-form-item :label="$t('是否生效')">
            <el-input v-model="formData['F_IsEffective']" placeholder="申请时间">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 部门 -->
        <el-col :span="24">
          <el-form-item :label="$t('部门')">
            <el-select
              v-model="formData['F_DepartmentId']"
              placeholder="请选择部门"
              filterable
              @change="selectDepartMent"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in F_DepartmentData"
                :key="index"
                :label="item.F_FullName"
                :value="item.F_DepartmentId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 申请人姓名 -->
        <el-col :span="24">
          <el-form-item :label="$t('申请人姓名')">
            <el-input v-model="formData['F_UserName']" placeholder="请输入申请人姓名"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 手机 -->
        <el-col :span="24"> 
          <el-form-item :label="$t('手机号码')" prop="F_Phone">
            <el-input v-model.number="formData['F_Phone']" placeholder="手机号码">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 出差原因 -->
        <el-col :span="24">
          <el-form-item :label="$t('出差原因')" prop="F_Reasons">
            <el-input
              v-model="formData['F_Reasons']"
              type="textarea"
              placeholder="请输入出差原因"
              :disabled="hasDisabledPermission('F_Reasons', false)"
              :readonly="!hasEditPermission('F_Reasons', false)"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- 新增行程开始 -->
        <el-col :span="24">
          <div class="trip-box" v-for="(items,index) in formData.tripData" :key="index">
            <!-- 标题 -->
            <div class="trip-title">
              <div class="trip-title-left"><i class="color-red">*</i>&nbsp;行程{{index+1}}</div>
              <div class="trip-title-right">
                <el-button size="small" @click="delTrip(index)" type="danger" icon="el-icon-delete">删除</el-button>
              </div>
            </div>
            <!-- 单程往返 -->
            <el-col :span="24">
              <el-form-item label="单程往返" 
                :prop="'tripData.'+index" 
                :rules="{required: true, message: '单程往返不能为空', trigger: 'change'}">
                <el-radio-group v-model="items.F_Onewayroundtrip" size="medium">
                  <el-radio-button v-for="(item, index) in F_OnewayroundtripOptions" :key="index"
                    :label="item.F_ItemValue">{{ item.F_ItemName }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- 交通工具 -->
            <el-col :span="24">
              <el-form-item label="交通工具" 
                :prop="'tripData.'+index+'.F_Vehicle'" 
                :rules="{required: true, message: '请选择交通工具', trigger: 'change'}">
                <el-select v-model="items.F_Vehicle" placeholder="请选择交通工具" :style="{ width: '100%' }">
                  <el-option  v-for="(item, index) in F_VehicleOptions" :key="index" :label="item.F_ItemName"
                    :value="item.F_ItemValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 出发城市 -->
            <el-col :span="24">
              <el-form-item label="出发城市" 
                :prop="'tripData.'+index+'.F_GoCityName'" 
                :rules="{required: true, message: '请选择出发城市', trigger: 'change'}">
                <el-input @focus="handleSelect(index)" v-model="items.F_GoCityName" placeholder="请选择出发城市" :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 出发城市id -->
            <el-col :span="24">
              <el-form-item label="出发城市id" v-show="showFalg">
                <el-input v-model="items.F_GoCityId" placeholder="请选择出发城市id" :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 目的城市 -->
            <el-col :span="24">
              <el-form-item label="目的城市" 
                :prop="'tripData.'+index+'.F_FromCityName'" 
                :rules="{required: true, message: '请选择目的城市', trigger: 'change'}">
                <el-input @focus="handleForm(index)" v-model="items.F_FromCityName" placeholder="请选择目的城市" :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 请选择目的城市id -->
            <el-col :span="24">
              <el-form-item label="目的城市id" v-show="showFalg">
                <el-input v-model="items.F_FromCityId" placeholder="请选择目的城市id" :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 开始时间 -->
            <el-col :span="24">
              <el-form-item label="开始时间" 
                :prop="'tripData.'+index+'.F_StartTime'" 
                :rules="{required: true, message: '请选择开始时间', trigger: 'change'}">
                <el-date-picker type="datetime" v-model="items.F_StartTime"  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss" :style="{ width: '100%' }" placeholder="请选择开始时间"
                  @change="computedTimes(index)"></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 结束时间 -->
            <el-col :span="24">
              <el-form-item label="结束时间" 
                :prop="'tripData.'+index+'.F_EndTime'" 
                :rules="{required: true, message: '请选择结束时间', trigger: 'change'}">
                <el-date-picker type="datetime" v-model="items.F_EndTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                  :style="{ width: '100%' }" placeholder="请选择结束时间"
                  @change="computedTimes(index)"></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 出差时长 -->
            <el-col :span="24">
              <el-form-item label="出差时长" 
                :prop="'tripData.'+index+'.F_TravelDays'" 
                :rules="{required: true, message: '出差时长不能为空', trigger: 'change'}">
                <el-input v-model="items.F_TravelDays" placeholder="请输入出差时长"
                  :readonly="true" :style="{ width: '100%' }" >
                  <template slot="append">天</template>
                </el-input>
              </el-form-item>
            </el-col>
          </div>
        </el-col>
        <!-- 新增行程按钮 -->
        <el-col :span="24">
          <el-form-item label="">
            <el-button size="small" @click="addTrip" type="primary" icon="el-icon-plus">新增行程</el-button>
          </el-form-item>
        </el-col>
        <!-- 新增行程结束 -->
        <!-- 出差总时长 -->
        <el-col :span="24">
          <el-form-item label="出差总时长" prop="F_travelTotalDays">
            <el-input v-model="formData['F_travelTotalDays']" placeholder="请输入出差时长"
              :readonly="true" :style="{ width: '100%' }" >
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 同行人 -->
        <el-col :span="24">
          <el-form-item label="同行人">
            <div class="peers" @click="handleFocus">
              <div class="flex11" v-if="selectPersonal.length > 0">
                <div class="peers11" v-for="(item,index) in selectPersonal" @click.stop="delPersonal(index)" >{{item.F_RealName}} X</div>
              </div>
              <div class="peers22" v-else>
                请选择
              </div>
            </div>
          </el-form-item>
        </el-col>
        <SelectStaff ref="selectStaff" @transmissionData="transmissionData" />
        <!-- 关联审批单 -->
        <el-col :span="24">
          <el-form-item :label="$t('关联审批单')">
            <el-input v-model="formData['F_Relation_approval_form']" placeholder="请选择关联审批单"
              @focus="handleFocus1"
              :style="{ width: '100%' }" >
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 关联审批单 -->
        <el-col :span="24" v-show="selectData1.length > 0">
          <el-form-item label="">
            <div class="del_items" v-for="(item,index) in selectData1" :key="index">
              <div class="del-items-left"><img src="../../../assets/card/file.png"></div>
              <div class="del-items-middle">{{item.startUser}}提交的{{item.schemeName}}</div>
              <div class="del-items-refuse" v-if="item.status==0">审批拒绝</div>
              <div class="del-items-adopt" v-else-if="item.status==1">审批通过</div>
              <div class="del-items-processing" v-else>审批中</div>
              <div class="del-items-close" @click="delApproval(item,index)"><img src="../../../assets/card/close.png"></div>
            </div>
          </el-form-item>
        </el-col>
        <!-- 出差备注 -->
        <el-col :span="24">
          <el-form-item :label="$t('出差备注')" prop="F_Remarks">
            <el-input
              v-model="formData['F_Remarks']"
              type="textarea"
              placeholder="请输入出差备注"
              :disabled="hasDisabledPermission('F_Remarks', false)"
              :readonly="!hasEditPermission('F_Remarks', false)"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- 意见簿 -->
        <el-col :span="24" v-show="optionsFlag">
          <el-form-item :label="$t('意见簿')" prop="field112e69d">
            <xjr-opinion-comonent
              :value="formData.field112e69d"
            ></xjr-opinion-comonent>
          </el-form-item>
        </el-col>
        <!-- 按钮 -->
        <el-col :span="24" v-if="!isWorkflowForm">
          <el-form-item size="large" v-if="isEdit">
            <el-button
              type="primary"
              @click="submitForm"
              :loading="submitLoading"
            >
              {{submitLoading ? $t("workFlow.WFMenu.hintSubmit") : $t("submit")}}</el-button
            >
            <el-button @click="cancelForm">{{ $t("cancelText") }}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <!-- 选择城市弹出框 -->
    <el-dialog
      title="请选择城市"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%"
      append-to-body
      :before-close="handleClose">
      <div class="city_list border">
        <div class="area-search">
          <el-input v-model="cityNameFilter" @focus="cityFilter" placeholder="请输入关键字过滤"></el-input>
        </div>
        <div class="area-selected" v-if="selectData && selectData.length > 0">
          已选城市：<span v-for="(item,index) in selectData" :key="index"> {{item.name}}</span>
          <el-button size="small" class="reset-button" icon="el-icon-refresh" @click="reset">重置</el-button>
        </div>
        <div class="city_list_top flex">
          <div class="city_list_top_items" 
            v-for="(item,index) in areaPingYinData" 
            @click="selectCityByPY(item)">
            {{item.label}}
          </div>
        </div>
        <ul class="ulclass">
          <li v-for="(item,index) in filterData" :key="index"
              @click="chooseCity(item)">{{item.name}}</li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 请选择关联表单（备用金申请） -->
    <el-dialog
      title="请选择关联表单"
      :visible.sync="approvalDialogVisibile"
      width="800px"
      append-to-body
      :before-close="handleClose">
        <RelationApproval ref="approval" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="approvalDialogVisibile = false">取 消</el-button>
          <el-button type="primary" @click="sure1">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import FilterableDataList from "@/components/generator/clientComponents/FilterableDataList.vue";
import workflowFormAuthorize from "@/mixins/workflowFormAuthorize";
import authorizeMixin from "@/mixins/authorize";
import { baseUrl } from "@/config/env";
import request from "@/router/axios";
import SelectStaff from '@/components/staffSelector/selectStaff.vue'
import RelationApproval from '../../cloudDisk/components/relationApproval.vue'
import {getUserDetailsById,getCityList,getLeaveDay} from '@/api/user.js';
export default {
  mixins: [authorizeMixin, workflowFormAuthorize],
  components: { SelectStaff,RelationApproval },
  props: ["keyValue", "isEdit", "disabled"],
  data() {
    var checkphone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号码不能为空'));
        }
        setTimeout(() => {
          if (value.toString().length != 11) {
            callback(new Error('请输入11位位长度的手机号码'));
          } else {

            if (value.toString().substring(0,1) != 1) {
              callback(new Error('请输入以1开头的手机号码'));
            } else {
              callback();
            }

          }
        }, 1000);
    };
    let _this = this;
    return {
      submitLoading: false,
      approvalDialogVisibile:false,
      dialogVisible:false,
      cityNameFilter:'',
      showFalg:false,
      showFormKey: 1,
      reRenderSubform: false,
      operationVal: "add",
      isAdd: true,
      addressUrl: "travel",
      mainTableName: "oa_travel",
      formConfig: {},
      formData: {
        'field1002d94': "",
        'F_DepartmentId': "",//部门id
        'F_DepartmentName':'',//部门名称
        'F_UserId': "",//申请人id
        'F_UserName':"",//申请人姓名
        'F_RoleId':'',//角色id
        'F_RoleName':'',//角色名称
        'F_Area':'',//地区
        'F_Job':'',//职级
        'F_Phone':'',//手机
        'F_Create_Time':'',//申请时间
        'F_Reasons': "",//出差原因
        'tripData':[
          {
            'F_Vehicle': "",//交通工具
            'F_Onewayroundtrip': "1",//单程往返
            'F_GoCityId': "",//出发城市id
            'F_GoCityName': "",//出发城市名称
            'F_FromCityId': "",//目的城市id
            'F_FromCityName':'',//目的城市名称
            'F_StartTime': null,//开始时间
            'F_EndTime': null,//结束时间
            'F_TravelDays': "",//出差时长
          }
        ],
        'F_travelTotalDays':'',//出差总天数
        'F_Peers':'', //同行人
        'F_Relation_approval_form':'',//关联审批单
        'F_Remarks': "",//出差备注
        'F_IsEffective': "0",//是否生效
        'field112e69d': null,//意见簿
      },
      rules: {
        F_DepartmentId: [
          {
            required: true,
            message: "请输入所在部门",
            trigger: "blur",
          },
        ],
        F_Reasons: [
          {
            required: true,
            message: "请输入出差原因",
            trigger: "blur",
          },
        ],
        // F_Vehicle: [
        //   {
        //     required: true,
        //     message: "请选择交通工具",
        //     trigger: "change",
        //   },
        // ],
        // F_Onewayroundtrip: [
        //   {
        //     required: true,
        //     message: "单程往返不能为空",
        //     trigger: "change",
        //   },
        // ],
        // F_GoCityName: [
        //   {
        //     required: true,
        //     message: "请输入出发城市",
        //     trigger: "change",
        //   },
        // ],
        // F_FromCityName: [
        //   {
        //     required: true,
        //     message: "请输入目的城市",
        //     trigger: "change",
        //   },
        // ],
        // F_StartTime: [
        //   {
        //     required: true,
        //     message: "请选择开始时间",
        //     trigger: "change",
        //   },
        // ],
        // F_EndTime: [
        //   {
        //     required: true,
        //     message: "请选择结束时间",
        //     trigger: "change",
        //   },
        // ],
        // F_TravelDays: [
        //   {
        //     required: true,
        //     message: "请输入出差时长",
        //     trigger: "blur",
        //   },
        // ],
        
        F_Remarks: [
        {
            required: true,
            message: "请输入出差备注",
            trigger: "blur",
          },
        ],

        F_travelTotalDays:[{
            required: true,
            message: "请假总时长不能为空",
            trigger: "blur",
        }],
        F_Phone:[
          {
            required: true,
            validator: checkphone,
            trigger: "blur",
          },
        ],
       
        F_GoCityId: [
          {
            required: false,
            message: "请输入出发城市id",
            trigger: "change",
          },
        ],
        F_FromCityId: [
          {
            required: false,
            message: "请输入目的城市id",
            trigger: "blur",
          },
        ],
        
        
        
        F_IsEffective: [
          {
            required: true,
            message: "请输入已生效",
            trigger: "blur",
          },
        ],
      },
      F_VehicleOptions: [],
      F_OnewayroundtripOptions: [],
      F_DepartmentData:[],
      cityFlag:false,
      cityFlag1:false,
      cityList:[],
      filterData:[],
      keyword1:'',
      F_DepartmentData:[],//部门信息
      F_RoleData:[],//角色信息
      F_JobData:'',//职级信息
      F_AreaData:'',//地区信息
      areaPingYinData:[
        {
          label:'ABCDE',
          value:'A,B,C,D,E',
        },
        {
          label:'FGHIJ',
          value:'F,G,H,I,J',
        },
        {
          label:'KLMNO',
          value:'K,L,M,N,O',
        },
        {
          label:'PQRST',
          value:'P,Q,R,S,T',
        },
        {
          label:'UVWXYZ',
          value:'U,V,W,X,Y,Z',
        },
      ],
      selectData:[],
      selectPersonal:[],
      selectData1:[],
      result:[],
      index:0,
      fromOrgo:'',
    };
  },
  computed: {},
  watch: {
    cityNameFilter(val){
      if(val && this.cityList && this.cityList.length > 0){
        let result  = []
        this.cityList.forEach(e => {
          if(e.name.includes(val)){
            result .push(e)
          }
        })
        this.filterData = result
      }else{
        this.filterData = this.cityList
      }
    },
    'formData.tripData':{
      deep:true,
      handler(val){
        let result = []
        if(val && val.length > 0){
          val.forEach(e => {
            if(e.F_TravelDays){
              result.push(parseFloat(e.F_TravelDays))
            }
          })
          if(result && result.length > 0){
            this.formData['F_travelTotalDays'] = this.handlerData(result)
          }
        }
      }
    }
  },
  async created() {
   this.formConfig = this.getFormConfig();
  },
  async mounted() {
    if (this.keyValue) {
      this.isAdd = false;
    }
    if (!this.isAdd && this.keyValue) {
      this.operationVal = "edit";
      let res = await request({
        url: baseUrl + "/" + this.addressUrl + "/" + this.keyValue,
        method: "get",
      });
      this.formData = res.data.data;
      this.showFormKey++;
    }
    if (typeof this.getF_VehicleOptions == "function") {
      await this.getF_VehicleOptions();
    }
    if (typeof this.getF_OnewayroundtripOptions == "function") {
      await this.getF_OnewayroundtripOptions();
    }
    this.getCurrentInfo()
    this.getCityList()
  },
  methods: {
    delApproval(item,index){
        if(this.$refs.approval.historyTaskData.includes(item)){
          this.$refs.approval.historyTaskData.forEach((e,i) => {
            if(e == item){
              this.$refs.approval.historyTaskData.splice(i,1)
            }
          })
        }
        if(this.$refs.approval.myTaskData.includes(item)){
          this.$refs.approval.myTaskData.forEach((e,i) => {
            if(e == item){
              this.$refs.approval.myTaskData.splice(i,1)
            }
          })
        }
        if(this.$refs.approval.manualTaskData.includes(item)){
          this.$refs.approval.manualTaskData.forEach((e,i) => {
            if(e == item){
              this.$refs.approval.manualTaskData.splice(i,1)
            }
          })
        }
        this.sure1('del')
      },
    sure1(v){
        if(v=='del'){
          this.formData['F_Relation_approval_form'] = ''
        }
        this.$refs.approval.historyTaskData = this.$refs.approval.historyTaskData.filter(e => e.isChecked)
        this.$refs.approval.myTaskData = this.$refs.approval.myTaskData.filter(e => e.isChecked)
        this.$refs.approval.manualTaskData = this.$refs.approval.manualTaskData.filter(e => e.isChecked)
        if(this.$refs.approval.historyTaskData && this.$refs.approval.historyTaskData.length > 0){
          this.$refs.approval.historyTaskData.forEach(element => {
            this.formData['F_Relation_approval_form'] += element.processInstanceId 
          })
        }
        if(this.$refs.approval.myTaskData && this.$refs.approval.myTaskData.length > 0){
          this.$refs.approval.myTaskData.forEach(element => {
            this.formData['F_Relation_approval_form'] += element.processInstanceId 
          })
        }
        if(this.$refs.approval.manualTaskData && this.$refs.approval.manualTaskData.length > 0){
          this.$refs.approval.manualTaskData.forEach(element => {
            this.formData['F_Relation_approval_form'] += element.processInstanceId 
          })
        }
        this.selectData1 = [...this.$refs.approval.historyTaskData,...this.$refs.approval.myTaskData,...this.$refs.approval.manualTaskData]
        this.approvalDialogVisibile = false
      },
    handleFocus1(){
      this.approvalDialogVisibile = true
    },
    transmissionData(val){
      this.selectPersonal = []
      if(val && val.length > 0){
        val.forEach(e => {
          this.selectPersonal.push(e)
        })
      }
      this.initPeers(val)
      this.$nextTick(()=>{
        this.$refs.selectStaff.closeDialog()
      })
    },

    initPeers(val){
      if(val && val.length > 0){
        let arr = []
        if(val.length == 1){
          this.formData['F_Peers'] = val[0].F_UserId
        }else{
          val.forEach(e => {
            arr.push(e.F_UserId)
          })
          this.formData['F_Peers'] += arr.join(',')
        }
      }
    },
    handleFocus(){
      this.$nextTick(()=>{
        this.$refs.selectStaff.openDialog()
      })
    },

    delPersonal(index){
      this.selectPersonal.splice(index,1)
      
    },
    handlerData(data){
      let count = 0
      if(data && data.length > 0){
        data.forEach(e => {
          count += e
        })
      }
      return count
    },
    sure(){
      if(this.fromOrgo == 'go'){
        if(this.selectData && this.selectData.length > 0){
          this.formData.tripData[this.index].F_GoCityId = this.selectData[0].code
          this.formData.tripData[this.index].F_GoCityName = this.selectData[0].name
        }else{
          this.formData.tripData[this.index].F_GoCityId = ''
          this.formData.tripData[this.index].F_GoCityName = ''
        }
      }else if(this.fromOrgo == 'from'){
        if(this.selectData && this.selectData.length > 0){
          this.formData.tripData[this.index].F_FromCityId = this.selectData[0].code
          this.formData.tripData[this.index].F_FromCityName = this.selectData[0].name
        }else{
          this.formData.tripData[this.index].F_FromCityId = ''
          this.formData.tripData[this.index].F_FromCityName = ''
        }
      }
      this.dialogVisible = false
    },
    reset(){
      this.selectData = []
    },
    cityFilter(){
      this.cityNameFilter = ''
      this.selectCityByPY()
    },
    handleSelect(index){
      this.fromOrgo = 'go'
      this.index = index
      this.dialogVisible = true
      this.selectData = []
    },
    handleForm(index){
      this.fromOrgo = 'from'
      this.index = index
      this.dialogVisible = true
      this.selectData = []
    },
    addTrip(){
      this.formData.tripData.push({
        'F_Vehicle': "",//交通工具
        'F_Onewayroundtrip': "1",//单程往返
        'F_GoCityId': "",//出发城市id
        'F_GoCityName': "",//出发城市名称
        
        'F_FromCityId': "",//目的城市id
        'F_FromCityName':'',//目的城市名称
        'F_StartTime': null,//开始时间
        'F_EndTime': null,//结束时间
        'F_TravelDays': "",//出差时长
      })
    },
    delTrip(index){
      this.formData.tripData.splice(index,1)
    },
    selectDepartMent(){
      if(this.F_DepartmentData && this.F_DepartmentData.length > 0){
        this.F_DepartmentData.forEach(e => {
          if(e.F_DepartmentId == this.formData['F_DepartmentId']){
            this.formData['F_DepartmentName'] = e.F_ShortName
          }
        })
      }
    },
    getCurrentTime(){
      var time = new Date();
      time.getFullYear(); //年
      time.getMonth(); //月
      time.getDate(); //日
      time.getHours(); //时
      time.getMinutes(); //分
      time.getSeconds(); //秒
      var mytime = time.getFullYear() + '-' + (time.getMonth()+1) + '-' + time.getDate() + ' ' + time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()
      return mytime //获取日期与时间
    },
    getFormData() {
      let key = this.mainTableName + "Entity";
      let returnParams = {};
      returnParams[key] = this.formData;
      return {
        ...returnParams,
      };
    },
    validateForm() {
      this.$refs["elForm"].validate((valid) => {});
    },
    async aysncValidateForm() {
      let validataArry = [];
      validataArry.push(
        new Promise((resolve, reject) => {
          this.$refs["elForm"].validate((valid) => {
            resolve(valid);
          });
        })
      );
      let res = await Promise.all(validataArry);
      if (res.includes(false)) {
        return false;
      } else {
        return true;
      }
    },
    changeTableData() {},
    async submitForm() {
      this.submitLoading = true;
      let valid = await this.aysncValidateForm();
      if (valid == false) {
        this.submitLoading = false;
        return false;
      }
      this.changeTableData();
      //格式化数据
      let newObj = this.getFormData();

      //如果没有传入参数就是新增
      if (!this.keyValue) {
        request({
          url: baseUrl + "/" + this.addressUrl,
          method: "post",
          data: newObj,
        }).then((res) => {
          this.submitLoading = false;
          this.$notify({
            title: "成功",
            message: "新增成功",
            type: "success",
          });
          this.$emit("onChange", true);
        });
      } else {
        request({
          url: baseUrl + "/" + this.addressUrl + "/" + this.keyValue,
          method: "put",
          data: newObj,
        }).then((res) => {
          this.submitLoading = false;
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
          });
          this.$emit("onChange", true);
        });
      }
    },
    cancelForm() {
      this.$emit("onChange", true);
    },
    formatTree(data, valueField, lableField, childField, type) {
      let tree = [];
      data.forEach((node, index) => {
        let newNode = {
          value: node[valueField],
          label: node[lableField],
        };
        if (type) {
          newNode.disabled = node[valueField] == undefined ? true : false;
        }
        tree.push(newNode);
        if (node[childField] != null && node[childField].length > 0) {
          newNode.children = this.formatTree(
            node[childField],
            valueField,
            lableField,
            childField,
            type
          );
        }
      }, this);
      return tree;
    },
    //辅助工作流 审批(编辑) 预留方法
    handleEdit() {},
    async getF_VehicleOptions() {
      // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
      try {
        let resp = await this.$axios({
          method: "get",
          url: baseUrl + "/data-items/vdhicle_type/detail",
        });
        if (resp.data.data) {
          this.F_VehicleOptions = resp.data.data;
        }
      } catch (error) {}
    },
    async getF_OnewayroundtripOptions() {
      // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
      try {
        let resp = await this.$axios({
          method: "get",
          url: baseUrl + "/data-items/one_way/detail",
        });
        if (resp.data.data) {
          this.F_OnewayroundtripOptions = resp.data.data;
        }
      } catch (error) {}
    },
    //子表单权限
    getAuthorityTableChildrenList(bindTable, children) {
      let column = [];
      if (bindTable && this.formEnCodeList && this.formEnCodeList[bindTable]) {
        let formSubEnCodeList = this.formEnCodeList[bindTable];
        if (children && children.length > 0) {
          column = children.map((ele2) => {
            if (formSubEnCodeList.includes(ele2.prop)) {
              ele2.hide = false;
            } else {
              ele2.hide = true;
            }
            if (ele2.hide == false) {
              //工作流中系统表单必填权限
              if (this.formSubTableNotRequiredList[bindTable] != undefined) {
                if (
                  this.formSubTableNotRequiredList[bindTable].includes(
                    ele2.prop
                  )
                ) {
                  ele2.required = false;
                } else {
                  ele2.required = true;
                }
              }
              ele2.rules = [];
              if (ele2.required) {
                ele2.rules = ele2.ruleList;
              }
              // disabled 属性
              if (this.formSubTableDisabledList[bindTable] != undefined) {
                if (
                  this.formSubTableDisabledList[bindTable].includes(ele2.prop)
                ) {
                  ele2.disabled = true;
                } else {
                  ele2.disabled = false;
                }
              }
            }
            return ele2;
          });
        }
        return column;
      } else {
        return children;
      }
    },
    getFormConfig() {
      let config = {
        fields: [
          //出差申请
          {
            __vModel__: "field1002d94",
            __config__: {
              label: "出差申请",
              showLabel: false,
              titleColor: null,
              fontSize: null,
              tag: "h2",
              span: 24,
              align: "top",
              justify: "start",
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 100,
            },
          },
          //部门id
          {
              "__vModel__": "F_DepartmentId",
              "__type__": "info",
              "infoType": "department",
              "__organize__": true,
              "__config__": {
                "label": "部门id",
                "showLabel": true,
                "tag": "avue-information-body",
                "avueType": "information-body",
                "defaultValue": "f97a88316e52c48d594ab5bb2b2d1bbe",
                "required": false,
                "span": 24,
                "whetherToRebindSecondaryEditing": false,
                "bindTableField": "F_DepartmentId",
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 133,
                "placeholder": "部门id",
                "fieldLength": 500,
                "bindTable": "oa_travel",
                "bindTableFieldType": "varchar"
              }
          }, 
          //部门名称
          {
            "__vModel__": "F_DepartmentName",
            "__config__": {
              "label": "部门名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": false,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 132,
              "fieldLength": 500,
              "bindTable": "oa_travel",
              "bindTableField": "F_DepartmentName",
              "bindTableFieldType": "varchar"
            }
          },
          {
            "__vModel__": "F_UserId",
            "__config__": {
              "label": "申请人id",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": false,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 130,
              "fieldLength": 500,
              "bindTable": "oa_travel",
              "bindTableField": "F_UserId",
              "bindTableFieldType": "varchar"
            }
          }, 
          //申请人姓名
          {
            "__vModel__": "F_UserName",
            "__config__": {
              "label": "申请人姓名",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": false,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 131,
              "fieldLength": 500,
              "bindTable": "oa_travel",
              "bindTableField": "F_UserName",
              "bindTableFieldType": "varchar"
            }
          },
          //角色id
          {
            "__vModel__": "F_RoleId",
            "__config__": {
              "label": "角色id",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": false,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 136,
              "fieldLength": 500,
              "bindTable": "oa_travel",
              "bindTableField": "F_RoleId",
              "bindTableFieldType": "varchar"
            }
          },
          //角色名称
          {
            "__vModel__": "F_RoleName",
            "__config__": {
              "label": "角色名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": false,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 135,
              "fieldLength": 500,
              "bindTable": "oa_travel",
              "bindTableField": "F_RoleName",
              "bindTableFieldType": "varchar"
            }
          },
          //地区
          {
            "__vModel__": "F_Area",
            "__config__": {
              "label": "地区",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": false,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 134,
              "fieldLength": 500,
              "bindTable": "oa_travel",
              "bindTableField": "F_Area",
              "bindTableFieldType": "varchar"
            }
          },
          //职级
          {
              "__vModel__": "F_Job",
              "__config__": {
                "label": "职级",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": false,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 136,
                "fieldLength": 50,
                "bindTable": "oa_travel",
                "bindTableField": "F_Job",
                "bindTableFieldType": "varchar"
              }
          }, 
          // 手机
          {
            "__vModel__": "F_Phone",
            "__config__": {
              "label": "手机号码",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": false,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 136,
              "fieldLength": 50,
              "bindTable": "oa_travel",
              "bindTableField": "F_Phone",
              "bindTableFieldType": "varchar"
            }
          },
          // 申请时间
          {
            "__vModel__": "F_Create_Time",
            "__config__": {
              "label": "申请时间",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": false,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 136,
              "fieldLength": 50,
              "bindTable": "oa_travel",
              "bindTableField": "F_Create_Time",
              "bindTableFieldType": "varchar"
            }
          },
          // 出差原因
          {
            tempType: "textarea",
            __vModel__: "F_Reasons",
            __config__: {
              label: "出差原因",
              showLabel: true,
              tag: "el-input",
              avueType: "textarea",
              required: true,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 103,
              fieldLength: 2000,
              bindTable: "oa_travel",
              bindTableField: "F_Reasons",
              bindTableFieldType: "varchar",
            },
          },
          // 交通工具
          {
            __vModel__: "F_Vehicle",
            __config__: {
              label: "交通工具",
              showLabel: true,
              tag: "el-select",
              avueType: "select",
              span: 24,
              required: true,
              saveField: "",
              showField: "",
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 104,
              dataType: "dataItem",
              dataItem: "vdhicle_type",
              fieldLength: 500,
              bindTable: "oa_travel",
              bindTableField: "F_Vehicle",
              bindTableFieldType: "varchar",
            },
          },
          // 单程往返
          {
            __vModel__: "F_Onewayroundtrip",
            __config__: {
              label: "单程往返",
              showLabel: true,
              tag: "el-radio-group",
              avueType: "radio",
              defaultValue: "1",
              span: 24,
              optionType: "button",
              required: true,
              border: false,
              saveField: "",
              showField: "",
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 105,
              dataType: "dataItem",
              dataItem: "one_way",
              fieldLength: 500,
              bindTable: "oa_travel",
              bindTableField: "F_Onewayroundtrip",
              bindTableFieldType: "varchar",
            },
          },
          // 出发城市id
          {
            __vModel__: "F_GoCityId",
            __config__: {
              label: "出发城市id",
              showLabel: true,
              tag: "el-input",
              avueType: "input-tip",
              required: true,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 116,
              fieldLength: 500,
              bindTable: "oa_travel",
              bindTableField: "F_GoCityId",
              bindTableFieldType: "varchar",
            },
          },
          // 出发城市名称
          {
            __vModel__: "F_GoCityName",
            __config__: {
              label: "出发城市",
              showLabel: true,
              tag: "el-input",
              avueType: "input-tip",
              required: true,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 114,
              fieldLength: 500,
              bindTable: "oa_travel",
              bindTableField: "F_GoCityName",
              bindTableFieldType: "varchar",
            },
          },
          // 目的城市id
          {
            __vModel__: "F_FromCityId",
            __config__: {
              label: "目的城市id",
              showLabel: true,
              tag: "el-input",
              avueType: "input-tip",
              required: true,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 117,
              fieldLength: 500,
              bindTable: "oa_travel",
              bindTableField: "F_FromCityId",
              bindTableFieldType: "varchar",
            },
          },
          // 目的城市名称
          {
            __vModel__: "F_FromCityName",
            __config__: {
              label: "目的城市",
              showLabel: true,
              tag: "el-input",
              avueType: "input-tip",
              required: true,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 115,
              fieldLength: 500,
              bindTable: "oa_travel",
              bindTableField: "F_FromCityName",
              bindTableFieldType: "varchar",
            },
          },
          // 开始时间
          {
            tempType: "date",
            __vModel__: "F_StartTime",
            __config__: {
              label: "开始时间",
              tag: "el-date-picker",
              avueType: "datetime",
              defaultValue: null,
              showLabel: true,
              span: 24,
              required: true,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 108,
              fieldLength: 500,
              bindTableFieldType: "datetime",
              bindTable: "oa_travel",
              bindTableField: "F_StartTime",
            },
          },
          // 结束时间
          {
            tempType: "date",
            __vModel__: "F_EndTime",
            __config__: {
              label: "结束时间",
              tag: "el-date-picker",
              avueType: "datetime",
              defaultValue: null,
              showLabel: true,
              span: 24,
              required: true,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 109,
              fieldLength: 500,
              bindTableFieldType: "datetime",
              bindTable: "oa_travel",
              bindTableField: "F_EndTime",
            },
          },
          //天
          {
            __vModel__: "F_TravelDays",
            append: "天",
            __config__: {
              label: "出差时长",
              showLabel: true,
              tag: "el-input",
              avueType: "input-tip",
              required: true,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 110,
              fieldLength: 500,
              bindTable: "oa_travel",
              bindTableField: "F_TravelDays",
              bindTableFieldType: "varchar",
            },
          },
          {
            __vModel__: "F_travelTotalDays",
            append: "天",
            __config__: {
              label: "出差总时长",
              showLabel: true,
              tag: "el-input",
              avueType: "input-tip",
              required: true,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 120,
              fieldLength: 500,
              bindTable: "oa_travel",
              bindTableField: "F_travelTotalDays",
              bindTableFieldType: "varchar",
            },
          },

          // 出差备注
          {
            tempType: "textarea",
            __vModel__: "F_Remarks",
            __config__: {
              label: "出差备注",
              showLabel: true,
              tag: "el-input",
              avueType: "textarea",
              required: false,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 111,
              fieldLength: 2000,
              bindTable: "oa_travel",
              bindTableField: "F_Remarks",
              bindTableFieldType: "varchar",
            },
          },
          // 已生效
          {
            __vModel__: "F_IsEffective",
            __config__: {
              label: "已生效",
              showLabel: true,
              tag: "el-input",
              avueType: "input-tip",
              defaultValue: "0",
              required: true,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 118,
              fieldLength: 500,
              bindTable: "oa_travel",
              bindTableField: "F_IsEffective",
              bindTableFieldType: "varchar",
            },
          },
          // 意见簿
          {
            tempType: "textarea",
            __vModel__: "field112e69d",
            __type__: "opinion",
            __config__: {
              label: "意见簿",
              showLabel: true,
              tag: "xjr-opinion-comonent",
              defaultValue: null,
              span: 24,
              F_LgMarkCode: "",
              prestrainField: "",
              formId: 112,
            },
          },
        ],
      };
      return config;
    },
    getCurrentInfo(){
      let params
      if(this.formData.F_UserId){
        params = {
          userId:this.formData.F_UserId
        }
      }else{
        params = {
          userId:this.$store.state.user.userInfo.F_UserId
        }
      }
      getUserDetailsById(params).then(res => {
        if(res && res.data && res.data.success){
          this.F_DepartmentData = res.data.data.F_Department//部门信息
          this.F_RoleData = res.data.data.F_Role//角色信息
          this.F_JobData = res.data.data.F_Job//职级
          this.F_AreaData = res.data.data.F_Area//地区
          this.formData['F_UserName'] = res.data.data.F_RealName//申请人姓名
          this.formData['F_UserId'] = res.data.data.F_UserId//申请人id
          this.initPersonal()   
          this.initDepartmentData()
         }
      })
    },
    initDepartmentData(){
      if(this.F_DepartmentData && this.F_DepartmentData.length == 1){
        this.formData['F_DepartmentName'] = this.F_DepartmentData[0].F_FullName
        this.formData['F_DepartmentId'] = this.F_DepartmentData[0].F_DepartmentId
      }
    },
    initPersonal(){
      let roleId = []
      let roleName = []
      //设置角色信息
      if(this.F_RoleData && this.F_RoleData.length > 0){
        this.F_RoleData.forEach(e => {
          roleId.push(e.F_RoleId)
          roleName.push(e.F_FullName)
        })
      }
      this.formData['F_RoleId'] = roleId.join(",")
      this.formData['F_RoleName'] = roleName.join(",")
      //设置地区信息
      this.formData['F_Area'] = this.F_AreaData
      // 设置职级信息
      this.formData['F_Job'] = this.F_JobData

    },
    selectCityByPY(item){
      if(item && item.value){
        let result = []
        let arrs = item.value.split(',')
        if(arrs && arrs.length > 0){
          arrs.forEach(e =>{
            if(this.cityList && this.cityList.length > 0){
              this.cityList.forEach(m => {
                if(m.pinyin.includes(e)){
                  result.push(m)
                }
              })
            }
          })
        }
        this.filterData = result
      }else{
        this.filterData = this.cityList
      }
    },
    getCityList(){
      let params = {
        keyword:'',
        limit:1,
        name:'',
        order:'',
        orderfield:'',
        pinyin:'',
        size:1000
      }
      getCityList(params).then(res => {
        if(res && res.data && res.data.data){
          if(res.data.data.Rows){
            this.cityList = res.data.data.Rows
            this.filterData = res.data.data.Rows
          }
        }
      })
    },
    selectCityShow(){
      this.cityFlag = true
      // this.formData['F_GoCityId'] = ''
    },
    selectCityShow1(){
      this.cityFlag1 = true
    },
    chooseCity(item){
      this.selectData = []
      this.selectData.push(item)
    },
    close(){
     this.cityFlag = false
    },
    close1(){
      this.cityFlag1 = false
    },
    computedTimes(index){
      if(this.formData.tripData[index].F_StartTime && this.formData.tripData[index].F_EndTime){
        this.getTimeDay(this.formData.tripData[index].F_StartTime,this.formData.tripData[index].F_EndTime,index)
      }
    },
    getTimeDay(F_StartTime,F_EndTime,index){
        let params = {
          userId:this.formData['F_UserId'],
          startTime:F_StartTime,
          endTime:F_EndTime
        }
        if(F_StartTime && F_EndTime){
          getLeaveDay(params).then(res => {
            if(res.data && res.data.success){
              this.formData.tripData[index].F_TravelDays = res.data.data
            }else{
              this.$message.error("系统错误，请联系管理员")
            }
          })
        }
    },
  },
};
</script>
<style>
.el-table__empty-block {
  width: 100% !important;
}

.avue-form__row {
  padding: 0 !important;
}

#editorphone {
  width: 375px;
  margin: 0 auto;
  border: 1px solid #e4e7ed;
  padding: 0 7.5px;
  background: #f5f6fa;
  height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 5px;
}

#editorphone .el-col {
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
  margin-bottom: 0;
  padding: 0 15px 6px !important;
  width: 100%;
}

#editorphone .el-form-item__label {
  line-height: 20px;
}

#editorphone .el-input-group .el-input__inner {
  background: #f5f6fa;
}

#editorphone .el-input__inner {
  border: 0;
}

#editorphone .el-input-group__append,
#editorphone .el-input-group__prepend {
  border: 0;
  background: #edeef2;
  color: #666;
}

#editorphone .el-input-group .el-input__prefix {
  left: 44px;
}

#editorphone .el-input-group .el-input__suffix {
  right: 44px;
}

#editorphone .el-form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: wrap;
}

#editorphone .el-form-item__label {
  float: none;
  min-width: 85px;
  width: auto !important;
  text-align: left;
  flex: auto;
}

#editorphone .tinymce .el-form-item__label {
  min-width: 100%;
}

#editorphone .el-form-item__content {
  margin-left: 0px !important;
  flex: auto;
  width: calc(100% - 95px);
}

#editorphone .avueFormNoLable .el-form-item__label,
#editorphone .avueFormNoLable .avue-crud__pagination {
  display: none;
}

#editorphone .avueFormNoLable .el-collapse-item__wrap,
#editorphone .avueFormNoLable .el-collapse {
  border-bottom: 0;
}

#editorphone .avueFormNoLable .el-col {
  border-bottom: 0;
  padding-bottom: 0;
}

#editorphone .el-form-item__content .el-button:first-child {
  margin-left: 90px;
}

/************开始***************/
.city_list{
  width: 100%;
}
.area-search{
  height: 32px;
  margin: 12px;
}
.area-selected{
  height: 32px;
  margin: 0 12px 12px 12px;
  font-size: 14px;
  font-weight: 600;
}
.city_list_top{
  width: 100%;
  height: 32px;
  background: rgb(232,243,255);
  border-radius: 4px;
  margin: 0 auto;
  position: relative;
  top: 0;
}
.ulclass{
  overflow: scroll;
  height: 230px;
}
.btnsss{
  width: 95%;
  margin: 0 auto;
  text-align: right;
  border-top: 1px solid rgb(228, 228, 228);
}
.height8{
  height: 8px;
}
.flex{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.city_list_top_items{
  width: 100px;
  height: 100%;
  line-height: 32px;
  font-size: 16px ;
  color: #333;
  text-align: center;
}
.city_list_top_items:hover{
  cursor: pointer;
  color: #0063f5;
}
.city_list > ul >li{
  width: 110px;
  float: left;
  list-style: none;
  text-align: left;
  font-size: 16px;
}
.city_list > ul >li:hover{
  cursor: pointer;
  color: #0063f5;
}
.close{
  text-align: right;
  line-height: 2em;
  color: #0063f5;
  font-size: 16px;
  margin-bottom: 8px;
}
/************结束***************/
.trip-title{
  width: 100%;
  height: 42px;
  display: flex;
  flex-direction: row;
}
.trip-title-left{
  width: 100px;
  height: 100%;
  text-align: right;
  line-height: 42px;
  font-size: 16px;
  font-weight: bold;
}
.trip-title-right{
  width: 100%;
  height: 100%;
  line-height: 42px;
  margin-left: 10px;
}
.color-red{
  font-size: 16px;
  color: #F56C6C;
}
.line_1{
  width: 100%;
  height: 1px;
  background: #DCDFE6;
  margin-top: 24px;
}
.reset-button{
  margin-left: 24px;
}
.peers{
  width: 100%;
  height: 36px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
}
.flex11{
  height: 36px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.peers11{
  margin-left: 12px;
  width: 80px;
  height: 26px;
  border: 1px solid #0063f5;
  text-align: center;
  border-radius: 4px;
  line-height: 26px;
  
}
.peers22{
  color: #DCDFE6;
  text-indent: 1em;
}
.peers11:hover{
  cursor: pointer;
  color: #0063f5;
}
</style>
